<template>
  <view class="content fixed">
    <view class="app-title ac">
      <view class="fl" @click="back">
        <image class="back" src="/static/img/back.png"></image> </view
      >所属专业系统
    </view>

    <view class="system">
      <view class="title"
        >所属专业系统<view class="add" @click="addItem">新增</view></view
      >

      <view class="list" v-for="(item, i) in data_list" :key="i">
        <view class="title"
          >{{ NumToNum(i + 1)
          }}<view class="remove" @click="removeItem(i)">删除</view></view
        >
        <view class="list-info">
          <u-cell-group>
            <u-cell-item
              title="所属:"
              :value="NumToNum(i + 1)"
              :arrow="false"
            ></u-cell-item>
            <u-cell-item
              title="单位:"
              :value="item.systemName == '' ? '请选择' : item.systemName"
              @click="
                show_picker = true;
                columns = system_options;
                index = i;
              "
            ></u-cell-item>
            <u-cell-item
              title="设备:"
              :value="item.deviceName"
              @click="getChild(item.system)"
            ></u-cell-item>
            <view class="hr"></view>
            <u-cell-item
              title="设备等级:"
              :value="item.devicelevel"
              :arrow="false"
            ></u-cell-item>
            <u-field
              v-model="item.refernum"
              label="设备数量:"
              placeholder="请填写"
            ></u-field>
          </u-cell-group>
        </view>
      </view>
    </view>

    <view class="push" @click="pushSystem">提交</view>

    <view class="full" v-show="show_picker || show_child"></view>
    <u-select
      v-model="show_picker"
      :list="columns"
      label-name="text"
      @confirm="onConfirm"
      @cancel="onCancel"
    ></u-select>
    <view v-show="show_child" class="child-system">
      <view class="controller">
        <view class="quit" @click="closeData">关闭</view
        ><!-- <view class="reset" @click="resetData">重置</view> --><view
          class="ok"
          @click="ok"
          >确认</view
        >
      </view>
      <view class="system-name">
        <view class="nowrap">
          <!-- <view class="name">全部：&nbsp;&nbsp;</view> -->
          <view
            class="name"
            v-for="(name, index) in title_list"
            :key="index"
            @click="resetTitle(name, index)"
            >{{ name + " > " }}</view
          >
        </view>
      </view>

      <view class="item-list">
        <view
          class="item"
          v-for="(item, index) in show_list"
          :key="index"
          @click="getChildName(item)"
          >{{ item.title }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [],
      system_options: [],
      subsystem_options: [],
      show_list: [],
      history_list: [],
      title_list: [],
      data_list: [
        // {
        // id: "",
        // faultId: "",
        // sort: "",
        // owner: "",
        // system: "",
        // system_name: "",//
        // subsystem: "",
        // subsystem_name: "",//
        // deviceid: "",
        // device_name: "",//
        // devicelevel: "",
        // refernum: "",
        // child: ""//
        // },
      ],
      index: 0,
      show_picker: false,
      show_child: false,
    };
  },
  props: ["faultSystemList"],
  created() {
    console.log("---------hha");
    console.log(this.faultSystemList);
    this.data_list = [...this.faultSystemList];
    this.getSystemPid();
  },
  mounted() {},
  methods: {
    back() {
      this.$emit("close");
    },
    getSystemPid() {
      this.fetch(
        "GET",
        this.$store.state.baseFaultUrl + "/kunmingdict/system/system?pid=",
        {},
        false,
        this.$store.state.faultCLHeader
      ).then((res) => {
        if (res.success) {
          this.system_options = res.data;
          this.system_options.map((item) => {
            item.extra = {
              type: "system",
              id: item.id,
            };
            item.text = item.name;
          });
        }
      });
    },
    getChild(id) {
      this.fetch(
        "GET",
        this.$store.state.baseFaultUrl +
          "/kunmingdict/system/systemTreeByPid?pid=" +
          id,
        {},
        false,
        this.$store.state.faultCLHeader
      ).then((res) => {
        if (res.success) {
          this.subsystem_options = res.data;
          this.show_list = [...this.subsystem_options];
          this.history_list.push(this.show_list);
          this.show_child = true;
        }
      });
    },
    onConfirm(item) {
      if (item[0].extra.type == "system") {
        this.data_list[this.index].systemName = item[0].label;
        this.data_list[this.index].system = item[0].extra.id;
        // this.getChild(item[0].extra.id);
      } else if (item[0].extra.type == "subsystem") {
        this.stationName = item[0].label;
        this.data_list.faultLocation = [item[0].extra.id];
      }
      this.onCancel();
    },
    onCancel() {
      this.show_picker = false;
    },
    closeData() {
      this.show_child = false;
      this.title_list = [];
      this.show_list = [];
      this.history_list = [];
    },
    addItem() {
      this.data_list.push({
        id: "",
        faultId: "",
        sort: this.data_list.length + 1,
        owner: "",
        system: "",
        systemName: "", //
        subsystem: "",
        subsystemName: "", //
        deviceid: "",
        deviceName: "", //
        devicelevel: "",
        refernum: "",
        child: "", //
      });
    },
    removeItem(i) {
      this.data_list.splice(i, 1);
    },
    // resetData() {
    // 	this.title_list = [];
    // },
    getChildName(obj) {
      // if(this.title_list.includes(title)) return;
      this.title_list.push(obj.title);
      if (obj.children == null) obj.children = [];
      this.show_list = [...obj.children];
      this.history_list.push(obj.children);
    },
    resetTitle(title, i) {
      this.title_list.splice(i);
      this.history_list.splice(i + 1);
      this.show_list = [...this.history_list[i]];
      // console.log(this.show_list);
    },
    ok() {
      if (this.show_list.length != 0)
        return uni.showToast({ title: "请选择最底层设备", icon: "none" });
      const last_title = this.title_list[this.title_list.length - 1];
      const device = this.history_list[this.history_list.length - 2].find(
        (item) => {
          return (item.title = last_title);
        }
      );
      this.data_list[this.index].deviceName = device.title;
      this.data_list[this.index].deviceid = device.id;
      this.data_list[this.index].devicelevel = device.level;
      this.closeData();
    },
    pushSystem() {
      console.log(this.data_list);
      let flag = false;
      for (var i = 0; i < this.data_list.length; i++) {
        let item = this.data_list[i];
        if (this.data_list[i].systemName == "") {
          uni.showToast({
            title: item.owner + "的单位不能为空",
            icon: "none",
          });
          flag = true;
          break;
        }
        if (this.data_list[i].deviceName == "") {
          uni.showToast({
            title: item.owner + "的设备不能为空",
            icon: "none",
          });
          flag = true;
          break;
        }
        if (this.data_list[i].refernum == "") {
          uni.showToast({
            title: item.owner + "的设备数量不能为空",
            icon: "none",
          });
          flag = true;
          break;
        }
      }
      if (flag) return;
      this.data_list.map((item, index) => {
        item.owner = this.NumToNum(index + 1);
      });
      this.$emit("setSystem", this.data_list);
    },
    NumToNum(num) {
      if (num > 999999999999)
        return uni.showToast({ title: "数字单位过大, 暂不支持", icon: "none" });
      const cnNumArr = [
        "",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
      ];
      const cnArr = [
        "",
        "",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿",
        "十",
        "百",
        "千",
        "万",
      ];
      let arr = (num + "").split("");
      let str = "";
      for (let i = 0; i < arr.length; i++) {
        str += cnNumArr[arr[i]] + cnArr[arr.length - i];
      }
      this.data_list[num - 1].owner = "第" + str + "所属专业系统";
      return "第" + str + "所属专业系统";
    },
  },
};
</script>

<style scoped>
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  z-index: 1000;
  background: #f9fbfe;
}
.system {
  width: 91.5%;
  margin: 10px auto;
  color: #000;
}
.system > .title {
  line-height: 36px;
  font-size: 16px;
  font-weight: bold;
}
.system .add {
  float: right;
  color: #fff;
  background: #307be0;
  width: 70px;
  line-height: 36px;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
}
.system .list {
  border-radius: 4px;
  font-size: 14px;
  margin-top: 15px;
  color: #303133;
  box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%);
}
.system > .list:last-child {
  margin-bottom: 40px;
}
.system .list > .title {
  background: #d8d8d8;
  line-height: 50px;
  padding: 0 15px;
  height: 50px;
}
.system .list > .title > .remove {
  color: red;
  float: right;
}
.list > .list-info {
  background: #fff;
  padding-left: 15px;
}
.list > .list-info .hr {
  height: 1px;
  background: #d8d8d8;
}
.child-system {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  color: #000;
  font-size: 12px;
  z-index: 100; /* height: 50vh;overflow: auto; */
}
.child-system > .controller {
  line-height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid #d7d7d7;
  position: relative;
}
.child-system > .controller > .quit,
.child-system > .controller > .ok {
  display: inline-block;
}
.child-system > .controller > .reset {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.child-system > .controller > .ok {
  float: right;
  line-height: 40px;
}
.system-name {
  line-height: 46px;
  border-bottom: 1px solid #d7d7d7;
  height: 46px;
  color: #2979ff;
  font-size: 14px;
}
.system-name > .nowrap {
  width: 96%;
  white-space: nowrap;
  overflow-x: scroll;
  margin: 0 auto;
}
.system-name > .nowrap > .name {
  display: inline-block;
}
.item-list {
  height: 40vh;
  overflow: auto;
}
.item {
  line-height: 36px;
  border-bottom: 1px solid #d7d7d7;
  padding: 0 15px;
}
.push {
  position: fixed;
  bottom: 0;
  left: 0;
  color: #fff;
  background: #307be0;
  width: 100%;
  line-height: 36px;
  font-size: 12px;
  text-align: center;
}
</style>
